基本的功能都實驗完了，今天來修改目前還是原生樣貌的首頁。

目前的首頁是透過 @/pages/[...slug].vue 頁面去渲染而成的，所以只要更改 @/content/index.md 就可以更改內文。更改如下，加上一些已經支援的屬性，並且附上正常的內文。

---
title: '主頁'
created_at: 2023-05-01 14:55:52
published_at: 2023-05-01 14:55:52
tags: []
---

[Hello]{.text-2xl}

我是月湖，
一個實踐卡片盒筆記法的知識愛好者。

這裡是我的數位花園（Digital Garden），
我會在這裡發表文章、筆記，也會收藏來自於網路上的資料，
關於更多本站的說明，你可以透過 [About](/about) 頁面中去進一步暸解。

這邊用到了一個 Nuxt Content 內建語法的小技巧，那就是 [文字]{CSS Class}，如 [Hello]{.text-2xl}，透過這個方式我就可以在不用將 Hello 改為標題的情況下，讓他字體透過 .text-2xl 這個 TailwindCSS 的修飾福變大了。

成果如下圖：

但首頁通常會有一些動態內容，最常見的就是最近發表的文章。為了客製化，我們另外新增首頁的頁面元件 @/pages/index.vue。

<template>
  <div class="prose mb-24">
    <ContentDoc>
      <template #default="{ doc }">
        <ContentRenderer :value="doc" />
      </template>
      <template #not-found>
        <p>There has no markdown file for index.</p>
      </template>
    </ContentDoc>
    <section class="mt-12">
      <header>
        <h2 class="mb-0 inline">Recently</h2>
      </header>
      <RecentlyArticleList />
    </section>
  </div>
</template>

除了原本的 <ContentDoc /> 和 <ContentRenderer /> 去渲染 @/content/index.md 外，另外新增一個 Recently 的區塊，並在下方使用的等要去新增的 <RecentlyArticleList /> 元件。

接著新增 @/components/RecentlyArticleList.vue

<template>
  <section>
    <h3>Articles</h3>
    <ol>
      <li v-for="post in data" :key="post._path" class="mb-0 leading-7">
        <span class="inline mr-2">{{ DateTime.fromISO(post.created_at).toLocal().toFormat('yyyy-LL-dd') }}</span>
        <span class="mb-0  "><NuxtLink :to="post._path">{{ post.title }}</NuxtLink></span>
      </li>
    </ol>
  </section>
</template>

<script setup lang="ts">
import { DateTime } from 'luxon'

const IsoDateTimeRegExp = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/
const recentlyCount = 5
const slug = 'articles'

const { data } = await useAsyncData(slug, () =>
  queryContent(slug)
      .only(['title', 'created_at', 'published_at', '_path'])
      .where({ published_at: { $eq: IsoDateTimeRegExp } })
      .limit(recentlyCount)
      .sort({ created_at: -1, published_at: -1 })
      .find()
)
</script>

在這裡其實和 @/pages/articles.vue 的結構大同小異，不一樣的地方是排版的方式，以及在獲取文章清單時，用 .limit(count) 限定了數量、透過 .where({ published_at: { $eq: IsoDateTimeRegExp } }) 限定已經發佈的文章。

成果如下，這樣首頁就有模有樣了！